<html lang="en">

<head th:include="templates/common :: header" />

<body>
	<div class="container" style="margin-top: 40px;">
		<div th:include="templates/common :: menu" ></div>	
		
		<div class="alert alert-success" th:if="${not #strings.isEmpty(status) and status == 'subjects.create.success'}">
			<a class="close">x</a>
			<p class="status" th:if="${not #strings.isEmpty(status)}" th:utext="#{${status}}">Status</p>
		</div>
		
		<div class="alert alert-danger" th:if="${not #strings.isEmpty(status) and status == 'subjects.create.failure'}">
			<a class="close">x</a>
			<p class="status" th:if="${not #strings.isEmpty(status)}" th:utext="#{${status}}">Status</p>
		</div>

		<div class="alert alert-success" th:if="${not #strings.isEmpty(status) and status == 'subjects.update.success'}">
			<a class="close">x</a>
			<p class="status" th:if="${not #strings.isEmpty(status)}" th:utext="#{${status}}">Status</p>
		</div>
		
		<div class="alert alert-danger" th:if="${not #strings.isEmpty(status) and status == 'subjects.update.failure'}">
			<a class="close">x</a>
			<p class="status" th:if="${not #strings.isEmpty(status)}" th:utext="#{${status}}">Status</p>
		</div>
		
		<div class="alert alert-success" th:if="${not #strings.isEmpty(status) and status == 'subjects.delete.success'}">
			<a class="close">x</a>
			<p class="status" th:if="${not #strings.isEmpty(status)}" th:utext="#{${status}}">Status</p>
		</div>	
		
		<div class="alert alert-danger" th:if="${not #strings.isEmpty(status) and status == 'subjects.delete.failure'}">
			<a class="close">x</a>
			<p class="status" th:if="${not #strings.isEmpty(status)}" th:utext="#{${status}}">Status</p>
		</div>	
		
		<div class="alert alert-danger" th:if="${not #strings.isEmpty(status) and status == 'subjects.constraint.exception'}">
			<a class="close">x</a>
			<p class="status" th:if="${not #strings.isEmpty(status)}" th:utext="#{${status}}">Status</p>
		</div>
		
		<div class="alert alert-danger" th:if="${not #strings.isEmpty(status) and status == 'subjects.not.found'}">
			<a class="close">x</a>
			<p class="status" th:if="${not #strings.isEmpty(status)}" th:utext="#{${status}}">Status</p>
		</div>
		
			
 		<div class="panel panel-primary" >		
	 		<div class="panel-body">				
				<div style="float:right; margin-bottom:10px;">
					<a class="btn btn-primary" th:href="@{/subjects/create}" th:inline="text">
						<i class="glyphicon glyphicon-plus-sign" style="margin-right:5px;"/>[[#{subjects.create}]]
					</a>
				</div>

				<form id="subjectsSearchForm" action="#" th:object="${searchHelper}" th:action="@{/subjects/__${beginIndex}__(order=${order}, column=${column}, searchString=${searchString})}" method="get" class="form-inline">
					<div class="col-lg-3">
						<input id="searchInput" type="text" th:field="*{searchString}" autofocus="autofocus" class="form-control" th:placeholder="#{app.search.label}" />
					</div>
					<button id="sumbitSearch" type="submit" class="btn btn-primary" th:inline="text"> 
						<i class="glyphicon glyphicon-search" style="margin-right: 5px;" />[[#{app.search}]]
					</button>
				</form>
			</div>
		</div>
			
		<table class="table table-bordered table-striped table-condensed">
			<thead>
				<tr>
					<th scope="col" style="text-align: center !important;">
						<a th:if="${!#strings.isEmpty(searchHelper.searchString)}" th:href="@{'/subjects/'+${currentIndex}(order=${order}, column='subjectName', searchString=${searchHelper.searchString})}" th:text="#{subjects.table.subject.name}"/>
						<a th:if="${#strings.isEmpty(searchHelper.searchString)}" th:href="@{'/subjects/'+${currentIndex}(order=${order} , column='subjectName')}" th:text="#{subjects.table.subject.name}"/>						
					</th>
					<th scope="col" style="text-align: center !important;">
						<a th:if="${!#strings.isEmpty(searchHelper.searchString)}" th:href="@{'/subjects/'+${currentIndex}(order=${order}, column='fullName', searchString=${searchHelper.searchString})}" th:text="#{teachers.role.name}"/>
						<a th:if="${#strings.isEmpty(searchHelper.searchString)}" th:href="@{'/subjects/'+${currentIndex}(order=${order}, column='fullName')}" th:text="#{teachers.role.name}"/>						
					</th>
					<th scope="col" style="text-align: center !important;">
						<label th:text="#{groups.label}" />												
					</th>
					<th scope="col" style="text-align: center !important;"></th>
				</tr>
			</thead>
			<tbody>
				<tr th:each="subject : ${subjects}">
					<td th:text="${subject.subjectName}" style="text-align: center; vertical-align: middle;"></td>							
					<td th:text="${subject.user.getFullName()}" style="text-align: center; vertical-align: middle;"></td>							
					<td style="text-align: center; vertical-align: middle;">
						<select id="groups" multiple="multiple" class="chzn-select btn-block">
							<option selected="selected" th:each="group : *{subject.groups}" th:value="${group.id}" th:text="${group.getGroupFullName()}" />
						</select>
					</td>							
					<td style="text-align: center; vertical-align: middle;">
						<a id="subjectEditLink" class="btn btn-primary btn-small" th:href="@{/subjects/edit/__${subject.id}__}" th:inline="text">
							<i class="glyphicon glyphicon-edit icon-white" style="margin-right:5px;"/>[[#{app.button.edit}]]
						</a>
						<a id="subjectDeleteLink" class="btn btn-danger btn-small" th:href="@{/subjects/delete/__${subject.id}__}"  th:inline="text" >
							<i class="glyphicon glyphicon-remove-sign" style="margin-right:5px;"/>[[#{app.button.delete}]]
						</a>
					</td>
				</tr>
			</tbody>
		</table>
				
		<div style="text-align:center">
			<ul class="pager">
				<li class="disabled" th:if="${currentIndex == 1}"><a href="#">&lt;&lt;</a></li>
				<li class="disabled" th:if="${currentIndex == 1}"><a href="#">&lt;</a></li>
				<li th:if="${currentIndex != 1}">
					<a th:if="${!#strings.isEmpty(searchHelper.searchString)}" th:href="@{/subjects/__${beginIndex}__(order=${order}, column=${column}, searchString=${searchHelper.searchString})}">&lt;&lt;</a>
					<a th:if="${#strings.isEmpty(searchHelper.searchString)}" th:href="@{/subjects/__${beginIndex}__(order=${order}, column=${column})}">&lt;&lt;</a>
				</li>
				<li th:if="${currentIndex != 1}">
					<a th:if="${!#strings.isEmpty(searchHelper.searchString)}" th:href="@{/subjects/__${currentIndex-1}__(order=${order}, column=${column}, searchString=${searchHelper.searchString})}">&lt;</a>
					<a th:if="${#strings.isEmpty(searchHelper.searchString)}" th:href="@{/subjects/__${currentIndex-1}__(order=${order}, column=${column})}">&lt;</a>
				</li>

				<li class="disabled" th:if="${currentIndex == totalPages}"><a href="#">&gt;</a></li>
				<li class="disabled" th:if="${currentIndex == totalPages}"><a href="#">&gt;&gt;</a></li>
				<li th:if="${currentIndex != totalPages}">
					<a th:if="${!#strings.isEmpty(searchHelper.searchString)}" th:href="@{/subjects/__${currentIndex+1}__(order=${order}, column=${column}, searchString=${searchHelper.searchString})}">&gt;</a>
					<a th:if="${#strings.isEmpty(searchHelper.searchString)}" th:href="@{/subjects/__${currentIndex+1}__(order=${order}, column=${column})}">&gt;</a>
				</li>
				<li th:if="${currentIndex != totalPages}">
					<a th:if="${!#strings.isEmpty(searchHelper.searchString)}" th:href="@{/subjects/__${endIndex}__(order=${order} , column=${column}, searchString=${searchHelper.searchString})}">&gt;&gt;</a>
					<a th:if="${#strings.isEmpty(searchHelper.searchString)}" th:href="@{/subjects/__${endIndex}__(order=${order} , column=${column})}">&gt;&gt;</a>
				</li>
			</ul>
		</div>
	</div>	
	
	<script type="text/javascript"> 
		$(document).ready(function() {
	    	$('.chzn-select').select2({});
	    	$('.chzn-select').prop('disabled', true);
	    });
	</script>	
</body>
</html>